<template>
    <div class="new_project">
       <div class="left-menu">
            <template class="user_info">
                 <el-avatar :size="70" :src="avatarUrl" />
                <div class="user_info_content">
                    <el-button class="user_info_name">超级管理员</el-button>
                </div>
            </template>
            <div class="project-menu">
                <div
                    v-for="item in asideList"
                    :key="item.key"
                    class="project-menu-box"
                    :class="{ active: showActiveKey === item.key }"
                    @click="handleSelect(item.key)"
                >
                <el-button class="menu-item">
                    <span
                        class="menu-icon"
                        :style="{
                            backgroundImage: `url(${item.icon})`,
                        }"
                    ></span>
                    <span class="project-menu-name">{{ item.value }}</span>
                </el-button>
                </div>
            </div>
        </div> 
        <div class="content-section">
            <HomeRouteView />
        </div>
    </div>
</template>

<script lang="ts" setup>
import avatarUrl from '../../assets/image/user.png';
import HomeRouteView from '@/components/HomeRouteView.vue';
import { init, asideList, handleSelect, showActiveKey } from './menuConfig';
import { t } from '@/i18n';
init();
</script>

<style scoped>
.new_project {
    display: flex;
    /* justify-content: space-between; */
    padding: 20px 0;
    width: 1360px;
    margin: 0 auto;
    gap: 20px;
}

.content-section {
    flex-grow: 1;
}

.left-menu {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    background-color: var(--section-color);
    width: 268px;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.user_info {
    padding: 40px 18px;
    display: flex;
}

.h50 {
    height: 50px;
    position: relative;
}

.user_info_content {
    width: 156px;
    margin: auto;
}

.user_info_name {
    border: none;
    background-color: white;
    margin: auto;
    font-weight: 900;
    font-size: var(--font-size-extra2);
    color: var(--font-color-active);
}

.user_info_introduction {
    font-size: var(--font-size-small);
    margin-top: 5px;
}

.project-menu .active {
    background-color: var(--menu-active-color);
}

.project-menu-box {
    cursor: pointer;
    height: 36px;
    line-height: 36px;
}

.project-menu-name {
    margin-left: 30px;
    font-weight: 800;
    font-size: medium;
    float: left;
}
.menu-item {
    float: left;
    padding: 0;
    border: none;
    width: 100%;
}
.menu-icon {
    display: flex;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 50px;
    background-repeat: no-repeat;
    background-size: 16px;
    vertical-align: -3px;
}
</style>
